<!-- 详情 -->
<template>
    <div style="height:100%;overflow-x: hidden;">
        <div style="position: relative;">
            <!-- 导航 -->
            <div style="position: absolute;top: 0;left: 0;z-index: 1000;">
                <div class="common-navigation">
                    <div class="other-functions">
                        <span style="display: flex;align-items: center;cursor: pointer;">
                            <img style="height: 1.5vh;margin-right:0.5vh;" :src="hi1" />
                            {{$t('搜索')}}
                        </span>
                        |
                        <!-- <span style="display: flex;align-items: center;cursor: pointer;">
                    <img style="height: 1.5vh;margin-right:0.5vh;" :src="require(`@/assets/img/header-i2}.png`)" />
                    设为主页
                </span>
                | -->
                        <span style="display: flex;align-items: center;cursor: pointer;">
                            <img style="height: 1.5vh;margin-right:0.5vh;" :src="hi3" />
                            <div>{{$t('企业邮箱')}}</div>
                        </span>
                        |
                        <span style="display: flex;align-items: center;cursor: pointer;">
                            <el-button type="text" style="font-size: 1.5vh;">CN</el-button>
                            <el-button type="text" style="font-size: 1.5vh;">EN</el-button>
                        </span>
                        |
                        <span style="display: flex;align-items: center;cursor: pointer;">
                            <img style="height: 1.5vh;margin-right:0.5vh;" :src="hi4" />
                            {{$t('登录')}}
                        </span>
                    </div>
                    <!-- 一级栏目及logo -->
                    <div style="display: flex;justify-content: space-between;align-items: center;">
                        <div class="navigation-logo">
                            <img :src="hwl2" style="height: 4vh;">
                        </div>
                        <div class="navigation-list">
                            <ul>
                                <li><a class="navigation-list-li">首页</a></li>
                                <li><a class="navigation-list-li">父级栏目</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 背景图 -->
            <div style="height: auto; width: 100%; overflow: hidden">
                <img style="height: 100%; width: 100%; object-fit: cover" :src="twoBackgroundImg" alt="" />
            </div>
        </div>
        <!-- 中间内容 -->
        <div style="display: flex;justify-content: space-between;min-height: 70vh;margin-bottom:5vh;">
            <div class="left-nav">
                <ul>
                    <div style="width:6px;height:auto;display: flex;justify-content: center;position: relative;margin-right:20px;">
                        <div style="width:4px;height:100%;background-color:#D8D8D8;position:absolute;"></div>
                        <div style="width:6px;height:74px;background-color:#980110;position:absolute;transition:0.3s;"></div>
                    </div>
                    <div>
                        <li class="active">二级栏目1→</li>
                        <li>二级栏目2</li>
                    </div>
                </ul>
            </div>
            <div class="right-content">
                <div class="breadcrumb-container">
                    <div class="breadcrumb-content">
                        <span class="separator">首页/父栏目/本栏目</span>
                    </div>
                    <!-- 显示最后一个面包屑值的标题div -->
                    <div class="breadcrumb-title-container">
                        <div class="breadcrumb-title">
                            本栏目
                        </div>
                    </div>
                </div>
                <div v-if="[1,11].includes(templateType)" class="details-box">
                    <div class="title">{{ detailsParam.title }}</div>
                    <div style="display: flex;justify-content: space-between;">
                        <div style="display: flex;">
                            <div @click="textSizeClick(1)" :class="`text-size ${textSize==1?'active':''}`">小</div>
                            <div @click="textSizeClick(2)" :class="`text-size ${textSize==2?'active':''}`">中</div>
                            <div @click="textSizeClick(3)" :class="`text-size ${textSize==3?'active':''}`">大</div>
                        </div>
                        <div class="source-data">
                            <img :src="source" alt="" style="width: 14px;height: 14px;">
                            <span style="margin-left:1vh;">来源：{{ detailsParam.source }}</span>
                            <img :src="time" alt="" style="width: 14px;height: 14px;margin-left:14px;">
                            <span style="margin-left:1vh;">时间：{{ displayDate }}</span>
                        </div>
                    </div>
                    <div v-html="processedContent" class="content" :style="{fontSize: textSize==1?'18px':textSize==2?'22px':'26px'}"></div>
                </div>
                <div v-if="[2].includes(templateType)" class="group-profile-container">
                    <div class="profile-content">
                        <div class="profile-text">
                            <div v-html="processedContent" class="content"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底 -->
        <div class="common-bottom">
            <div class="flex-div">
                <div>
                    <img :src="bText" style="height: 7vh;margin-top:0.8vh;">
                </div>
                <div style="font-size: 1.5vh;font-weight:250;">
                    <div class="right-text" style="font-size: 2.5vh;">
                        <span style="margin-right:-0.1vw;">( 86-412 ) 6723090</span>
                        <img :src="bi4" class="right-i">
                    </div>
                    <div class="right-text" style="line-height:3vh;">
                        ( 86-412 ) 6723080
                        <img :src="bi5" class="right-i">
                    </div>
                    <div class="right-text" style="line-height:3vh;">
                        中国辽宁省鞍山市铁东区五一路63号
                        <img :src="bi6" class="right-i">
                    </div>
                    <div class="right-text" style="line-height:3vh;">
                        group@ansteel.com.cn
                        <img :src="hi3" class="right-i">
                    </div>
                </div>
            </div>
            <div style="width:100%;height:0.1vh;background-color: rgba(255,255,255,0.5);margin:1vh 0;"></div>
            <div class="flex-div" style="font-weight:250;font-size: 1.5vh;line-height:2;color:rgba(255,255,255,0.7);">
                <div style="width:58%;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;font-weight: 250;">
                    <div>相关网站：<a target="_blank">鞍钢集团网站群</a></div>
                    <div>友情链接：<a target="_blank">国务院国有资产监督管理委员会</a></div>
                </div>
                <div style="text-align: end;width:40%;">
                    <div>©2025 鞍钢集团有限公司
                        <a target="_blank">辽ICP备05004580</a>
                        *建议使用IE9以上版本浏览器
                    </div>
                    <div><a target="_blank">法律声明</a></div>
                </div>
            </div>
        </div>
    </div>
</template>
  
  <script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getContentDetail } from '@/api/allApi'
import twoBackgroundImg from '@/assets/img/default-bi.jpg'
import hi1 from '@/assets/img/header-i1.png'
import hi2 from '@/assets/img/header-i2.png'
import hi3 from '@/assets/img/header-i3.png'
import hi4 from '@/assets/img/header-i4.png'
import hwl2 from '@/assets/img/header-white-loge2.png'
import bi4 from '@/assets/img/bottom-i4.png'
import bi5 from '@/assets/img/bottom-i5.png'
import bi6 from '@/assets/img/bottom-i6.png'
import bText from '@/assets/img/bottom-text.png'
import source from '@/assets/img/source.png'
import time from '@/assets/img/time.png'

interface DetailsParam {
	title: string
	source: string
	content?: string
	customDate?: string
	publishTime: string
	[key: string]: any
}

const route = useRoute()
const detailsParam = ref<DetailsParam>({} as DetailsParam)
const textSize = ref(1)

const displayDate = computed(() => {
	const date = detailsParam.value.customDate || detailsParam.value.publishTime
	return date ? date.slice(0, 10) : ''
})

const fontSize = computed(() => {
	const sizes = { 1: '18px', 2: '22px', 3: '26px' }
	return sizes[textSize.value as keyof typeof sizes]
})

const processedContent = computed(() => {
	if (!detailsParam.value.content) return ''

	return detailsParam.value.content.replace(/<img([^>]*)>/gi, (match, attributes) => {
		if (/style="/i.test(attributes)) {
			return `<img${attributes.replace(
				/style="([^"]*)"/i,
				(styleMatch, styleValue) => `style="${styleValue} width:100% !important; height:auto !important; display:block; margin:20px auto;"`
			)}>`
		} else {
			return `<img${attributes} style="width:100% !important; height:auto !important; display:block; margin:20px auto;">`
		}
	})
})
const templateType = ref(0)
const init = () => {
	getContentDetail({ id: route.query.contentId }).then(res => {
		templateType.value = res.data.templateType
		detailsParam.value = res.data
	})
}

const textSizeClick = (num: number) => {
	textSize.value = num
}
// 生命周期钩子
onMounted(() => {
	init()
})
</script>
  
  <style scoped lang="scss">
//导航
.common-navigation {
	width: 100%;
	height: 10vh;
	color: #fff;
	font-weight: 250;
	transition: 0.8s;
}

.other-functions {
	width: 100vw;
	height: 5vh;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-right: 1vw;
	font-size: 1.5vh;
	box-sizing: border-box;
	span {
		margin: 0 1vw;
	}
}

.navigation-logo {
	width: 7vw;
	margin-left: 2vw;
}

.navigation-list ul {
	list-style: none;
	padding-right: 2vw;
	display: flex;
}

.navigation-list-li {
	display: inline-block;
	color: #fff;
	padding-left: 4vh;
	text-align: center;
	text-decoration: none;
	transition: 0.6s;
	line-height: 5vh;
	font-size: 2vh;
	letter-spacing: 0.1em;
	cursor: pointer;
}
.navigation-list-li:hover {
	font-size: 2.5vh;
}
//左侧二级栏目
.left-nav {
	width: 476px;
	background-color: #fff;
	padding: 68px 0 0 120px; /* 改为视口宽度的2% */
}

.left-nav ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0 20px; /* 改为视口宽度的2% */
}

.left-nav li {
	height: 74px;
	padding: 20px; /* 改为视口宽度的百分比 */
	color: #333;
	cursor: pointer;
	transition: all 0.3s;
	border-left: 6px solid transparent; /* 改为视口宽度的0.4% */
	white-space: nowrap;
	font-size: 20px;
	font-weight: 350;
}

.left-nav li:hover {
	color: #980110;
}

.left-nav li.active {
	background-color: transparent;
	color: #980110;
	position: relative;
	font-weight: 400;
	font-size: 24px;
}
//右侧内容
.right-content {
	width: 1308px;
	box-sizing: border-box;
	margin-right: 136px;
}
//面包屑
.breadcrumb-container {
	width: 100%;
	box-sizing: border-box;
	font-size: 14px;
	display: flex;
	flex-direction: column;
	margin: 16px 0 28px 0;
	//padding-left: 78px;
}

.breadcrumb-title-container {
	border-left: 4px solid #980110;
	padding-left: 15px;
	position: relative;
}

.breadcrumb-title {
	font-size: 24px;
	font-weight: 300;
	color: #000;
}

.breadcrumb-content {
	max-width: 100%;
	margin-bottom: 32px;
	text-align: right;
	white-space: nowrap;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: relative;
}

.breadcrumb-content a {
	color: #666;
	text-decoration: none;
}

.breadcrumb-content a:hover {
	color: #0066cc;
	text-decoration: underline;
}

.separator {
	color: #999;
	margin: 0 5px;
}
//列表、时政，详情
.details-box {
	width: 100%;
	height: auto;
	.title {
		font-size: 28px;
		font-weight: 500;
		line-height: 46px;
		text-align: center;
		margin: 28px 0 32px 0;
	}
	.text-size {
		width: 24px;
		height: 24px;
		font-size: 14px;
		text-align: center;
		cursor: pointer;
		margin-right: 12px;
		border-radius: 4px;
		color: #19205d;
		border: 1px solid #19205d;
	}
	.active {
		background-color: #19205d;
		color: #fff;
	}
	.content {
		margin-top: 28px;
		font-size: 18px;
		font-weight: 350;
		line-height: 2.5;
		text-indent: 2em;
		text-align: justify; // 两端对齐
		color: #3d3d3d;
		::v-deep table,
		::v-deep td,
		::v-deep th {
			border: 1px solid black;
			text-align: center;
			line-height: 1.5;
			padding: 5px 0;
		}
		::v-deep table {
			border-collapse: collapse;
			width: 100%;
		}
	}
}
//全内容
.group-profile-container {
	margin: 0 auto;
}

.profile-content {
	line-height: 1.8;
	color: #666;
}

.profile-text p {
	margin-bottom: 16px;
	text-align: justify;
}
.content {
	margin-top: 28px;
	font-size: 18px;
	font-weight: 350;
	line-height: 46px;
	text-indent: 2em;
	color: #3d3d3d;
}
//底
.common-bottom {
	width: 100%;
	height: 28vh;
	background-color: #19205d;
	box-sizing: border-box;
	padding: 4vh 7vw 3vh 7vw;
	color: #fff;
	letter-spacing: 0.03em;
	a {
		color: rgba(255, 255, 255, 0.7);
		text-decoration: none;
	}
}
.flex-div {
	display: flex;
	justify-content: space-between;
}
.right-text {
	color: rgba(255, 255, 255, 0.7);
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.right-i {
	width: 1.8vh;
	height: 1.8vh;
	margin-left: 0.5vw;
}
</style>